<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 7.11 (457846)"/><meta name="author" content="tian18840876830@163.com"/><meta name="created" content="2018-07-08 09:20:20 +0000"/><meta name="source" content="desktop.mac"/><meta name="updated" content="2019-07-02 02:50:55 +0000"/><title>day22_模块化开发</title></head><body style="zoom: 1.998952;"><div><div><span style="font-size: 18px; font-weight: bold;">学习目标：</span></div><ol><li><div>模块化开发的必要性</div></li><li><div>模块化的写法历史</div></li><li><div>AMD规范</div></li><li><div>require.js用法</div></li><li><div>request.js的应用</div></li></ol><div><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;">一、JavaScript模块化的必要性</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><span style="font-family: Monaco;"><font style="font-size: 14px;">随着网站逐渐变成<font color="#AA7942">"互联网应用程序（WebApp）"</font>，嵌入网页的Javascript代码越来越庞大，越来越复杂。</font></span></div></div><div><img src="day22_%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91.html.resources/E7F684C5-8A0D-4F4F-B7EF-F8E8932F9772.png" height="285" width="564"/><br/></div><div><br/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"> </span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">网页越来越像桌面程序，需要一个团队分工协作、进度管理、单元测试等等</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">......</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">开发者不得不使用软件工程的方法，管理网页的业务逻辑。</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">    Javascript</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。</span></font></div><div><font style="font-size: 14px;"><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">但是，</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Javascript</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">不是一种模块化编程语言，它不支持</span><font color="#AA7942"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">"</span><a href="http://www.ruanyifeng.com/blog/2012/07/three_ways_to_define_a_javascript_class.html" style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 0, 0); font-family: Monaco; text-decoration: underline; color: rgb(14, 117, 13);">类</a><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">"</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">（</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">class</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">），更遑论</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">"</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">模块</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">"</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">（</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">module</span></font><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"><font color="#AA7942">）</font><font color="#000000">了。（正在制定中的</font></span><a href="http://en.wikipedia.org/wiki/ECMAScript" style="color: rgb(14, 117, 13); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 0, 0); font-family: Monaco; text-decoration: underline;">ECMAScript</a><a href="http://en.wikipedia.org/wiki/ECMAScript" style="color: rgb(14, 117, 13); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 0, 0); font-family: Monaco; text-decoration: underline;">标准</a><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">第六版，将正式支持</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">"</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">类</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">"</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">和</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">"</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">模块</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">"</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">，但还需要很长时间才能投入实用。）</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Javascript</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">社区做了很多努力，在现有的运行环境中，实现</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">"</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">模块</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">"</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">的效果。</span></font></div></div><div><br/></div><div><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;">二、Javascript模块化的写法-原始写法</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">模块就是实现特定功能的一组方法。</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。</span></font></div><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">比如</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">:tool.js</span></font></div></div><div><img src="day22_%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91.html.resources/3D649448-FC31-40FC-B6AC-3516B0097C65.png" height="208" width="722"/><br/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">上面的函数</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">m1</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">()</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">和</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">m2</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">()</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">，组成一个模块。使用的时候，直接调用就行了。</span></font></div><div><font style="font-size: 14px;"><font color="#000000"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">这种做法的缺点很明显：</span></font><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">"</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">污染</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">"</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。</span></font></div></div><div><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;">2.2Javascript模块化的写法-对象写法</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">为了解决上面的缺点，可以把模块写成一个对象，所有的模块成员都放到这个对象里面。</span></font></div></div><div><img src="day22_%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91.html.resources/10FCB6CA-98AB-44B5-88B3-0F05B9EB7A23.png" height="265" width="884"/><br/></div><div><br/></div><div><br/></div><div><span style="font-size: 18px; font-weight: bold;">2.3Javascript模块化的写法-立即执行函数写法(闭包)</span></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font style="font-size: 14px;"><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">使用</span><font color="#AA7942"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">"</span><a href="http://benalman.com/news/2010/11/immediately-invoked-function-expression/" style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 0, 0); font-family: Monaco; text-decoration: underline; color: rgb(14, 117, 13);">立即执行函数</a><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">"</span></font><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">（</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Immediately-Invoked Function Expression</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">，</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">IIFE</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">），可以达到不暴露私有成员的目的。</span></font></div></div><div><img src="day22_%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91.html.resources/A49C359F-350A-43D0-A9DC-95CDA8163559.png" height="290" width="735"/><br/></div><div><br/></div><div><br/></div><div><span style="font-size: 18px; font-weight: bold;">2.4Javascript模块化的写法-放大模式</span></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"><font color="#000000">如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有</font></span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">必要采用</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">"</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">放大模式</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">"</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">（</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">augmentation</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">）。</span></font></div></div><div><img src="day22_%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91.html.resources/55A9C46D-4102-4FC3-A97F-04F48497C751.png" height="150" width="803"/><br/></div><div><br/></div><div><span style="font-size: 18px; font-weight: bold;">2.4Javascript模块化的写法-宽放大模式</span></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><span style="font: 20.0px Helvetica; font-kerning: none; color: #ffffff; -webkit-text-stroke: 0px #ffffff; font-family: Monaco; font-size: 12px;">    </span><font style="font-size: 14px;"><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">在浏览器环境中，模块的各个部分通常都是从网上获取的，</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;"><font color="#FF2600">有时无法知道哪个部分会先加载</font><font color="#000000">。</font></span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">如果采用上一节的写法，第一个执行的部分有可能加载一个不存在空对象，这时就要采用</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">"</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">宽放大模式</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">"</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">。</span></font></div></div><div><img src="day22_%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91.html.resources/72CD954F-3794-4C68-8963-1F6DECF6168A.png" height="153" width="864"/><br/></div><div><br/></div><div><br/></div><div><span style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;">三、模块规范</span></span></div><div><span style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;">（DIY电脑，所有模块都需要接口统一）</span></span></div><div><img src="day22_%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91.html.resources/16A16379-2303-45B1-9C91-394E2A1F7D4A.png" height="736" width="994"/><br/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">先想一想，为什么模块很重要？</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">因为有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。</span></font></div><div><font style="font-size: 14px;"><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">但是，这样做有一个前提，那就是大家必须以同样的方式编写模块，否则你有你的写法，我有我的写法，岂不是乱了套！考虑到</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Javascript</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">模块现在还没有官方规范，这一点就更重要了。目前，通行的</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Javascript</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">模块规范共有两种：</span><a href="http://wiki.commonjs.org/wiki/Modules/1.1" style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; text-decoration: underline; color: rgb(14, 117, 13);"><font color="#AA7942">CommonJS</font></a><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">和</span><font color="#AA7942" style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-text-stroke: 0px rgb(255, 255, 255); font-family: Monaco; text-decoration: underline; color: rgb(14, 117, 13);"><a href="https://github.com/amdjs/amdjs-api/wiki/AMD" style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco; text-decoration: underline; color: rgb(14, 117, 13);">AMD</a>（CMD）</font><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">。我主要介绍</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">AMD</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">，但是要先从</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">CommonJS</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">讲起。</span></font></div></div><div><br/></div><div><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;">四、CommonJS</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font style="font-size: 14px;"><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">2009</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">年，美国程序员</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Ryan Dahl</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">创造了</span><a href="http://nodejs.org/" style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 0, 0); font-family: Monaco; text-decoration: underline; color: rgb(14, 117, 13);"><font color="#AA7942">node.js</font></a><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">项目，将</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">javascript</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">语言用于服务器端编程。</span></font></div></div><div><img src="day22_%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91.html.resources/DF8BED16-FD8A-4C09-82D1-698FD114F851.png" height="134" width="455"/><br/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><span style="font: 19.0px Helvetica; font-kerning: none; color: #ffffff; -webkit-text-stroke: 0px #ffffff; font-family: Monaco; font-size: 12px;">  </span><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">   </span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">这标志</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">"Javascript</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">模块化编程</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">"</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">正式诞生。因为老实说，在浏览器环境下，没有模块也不是特别大的问题，毕竟网页程序的复杂性有限；但是在服务器端，一定要有模块，与操作系统和其他应用程序互动，否则根本没法编程。</span></font></div><div><font style="font-size: 14px;"><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">node.js</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">的</span><a href="http://nodejs.org/docs/latest/api/modules.html" style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 0, 0); font-family: Monaco; text-decoration: underline; color: rgb(14, 117, 13);"><font color="#AA7942">模块系统</font></a><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">，就是参照</span><a href="http://wiki.commonjs.org/wiki/Modules/1.1" style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 0, 0); font-family: Monaco; text-decoration: underline; color: rgb(14, 117, 13);"><font color="#AA7942">CommonJS</font></a><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">规范实现的。在</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">CommonJS</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">中，有一个全局性方法</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">require</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">()</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">，用于加载模块。假定有一个数学模块</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">math.js</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">，就可以像下面这样加载。</span></font></div></div><div><br/></div><div><img src="day22_%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91.html.resources/78703ED5-6C96-46B9-8BC2-D134590D9EEA.png" height="65" width="714"/><br/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">因为这个系列主要针对浏览器编程，不涉及</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">node.js</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">，所以对</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">CommonJS</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">就不多做介绍了。我们在这里只要知道，</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">require</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">()</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">用于加载模块就行了。</span></font></div></div><div><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;">五、浏览器环境</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">有了服务器端模块以后，很自然地，大家就想要客户端模块。而且最好两者能够兼容，一个模块不用修改，在服务器和浏览器都可以运行。</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">  </span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">但是，由于一个重大的局限，使得</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">CommonJS</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">规范不适用于浏览器环境。还是上一节的代码，如果在浏览器中运行，会有一个很大的问题，你能看出来吗？</span></font></div></div><div><img src="day22_%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91.html.resources/667D73B4-D9F1-49D0-950B-20E7AFF6A7B5.png" height="45" width="701"/><br/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">第二行</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">math.add</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">(</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">2</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">,</span> <span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">3</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">)</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">，在第一行</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">require</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">(</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">'math'</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">)</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">之后运行，因此必须等</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">math.js</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">加载完成。也就是说，如果加载时间很长，整个应用就会停在那里等。</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">这对服务器端不是一个问题，因为所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间。但是，对于浏览器，这却是一个大问题，因为模块都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">"</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">假死</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">"</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">状态。</span></font></div><div><font style="font-size: 14px;"><font color="#000000"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">因此，浏览器端的模块，</span></font><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">不能采用</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">"</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">同步加载</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">"</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">（</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">synchronous</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">），只能采用</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">"</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">异步加载</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">"</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">（</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">asynchronous</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">）</span><font color="#000000"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">。这就是</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">AMD</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">规范诞生的背景。</span></font></font></div></div><div><br/></div><div><br/></div><div><span style="font-size: 18px; font-weight: bold;">六、</span> <span style="-webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-size: 18px; font-family: Helvetica; font-style: normal; font-variant-caps: normal; font-variant-ligatures: no-common-ligatures; font-weight: bold; line-height: normal;">AMD</span></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; color: rgb(69, 69, 69); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 0, 0); font-family: Monaco;">      </span><font color="#FF2600"><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 0, 0); font-family: Monaco;"> </span> <a href="https://github.com/amdjs/amdjs-api/wiki/AMD" style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 0, 0); font-family: Monaco; text-decoration: underline; color: rgb(14, 117, 13);">AMD</a></font><font color="#000000"><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">是</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">"Asynchronous Module Definition"</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">的缩写，意思就是</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">"</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">异步模块定义</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">"</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。</span></font></font></div></div><div><img src="day22_%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91.html.resources/BAC1F22C-1E13-4C54-8AD5-7736D8732093.png" height="150" width="752"/><br/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><span style="font-weight: bold; font-size: 12px; font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">       </span> <font color="#0A990C" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">math.add()</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">与</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">math</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">模块加载不是同步的，浏览器不会发生假死。所以很显然，</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">AMD</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">比较适合浏览器环境。</span></font></div><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">       </span> <span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">目前，主要有两个</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Javascript</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">库实现了</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">AMD</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">规范：</span><font color="#FF2600"><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">require.js</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">和</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">curl.js</span></font><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">。本系列的第三部分，将通过介绍</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">require.js</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">，进一步讲解</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">AMD</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">的用法，以及如何将模块化编程投入实战。</span></font></div></div><div><br/></div><div><span style="font-size: 18px; -webkit-text-stroke-color: rgb(255, 255, 255);"><span style="font-size: 18px; font-family: Helvetica; font-weight: bold;">七、require.js</span></span></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font face="Helvetica" style="font-size: 14px;"><span style="-webkit-text-stroke-color: rgb(255, 255, 255);"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">    </span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">我们给大家介绍了</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">Javascript</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">模块原型和理论概念，今天介绍如何将它们用于实战。我采用的是一个非常流行的库</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">require.js</span></span></font></div></div><div><img src="day22_%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91.html.resources/B29FC543-6C6C-40FD-9352-46640BF9B413.png" height="290" width="326"/><br/></div><div><font style="font-size: 18px;"><span style="-webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-size: 18px; font-family: Helvetica; font-style: normal; font-variant-caps: normal; font-variant-ligatures: no-common-ligatures; font-weight: bold; line-height: normal;">7.1为什么要用require.js？</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><span style="font-family: Monaco; color: rgb(51, 51, 51);"><b style="font-size: 14px;">  </b> <font style="font-size: 14px;"> 最早的时候，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，一个文件不够了，必须分成多个文件，依次加载。下面的网页代码，相信很多人都见过。</font></span></div></div><div><img src="day22_%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91.html.resources/4BF16F49-53DC-4CF4-806F-E78619FF8582.png" height="107" width="769"/><br/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">这段代码依次加载多个</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">js</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">文件。</span></font></div><div><font style="font-size: 14px;"><font color="#000000"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">这样的写法有很大的缺点。</span></font><font color="#099F0C"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">首先，加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；其次，由于</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">js</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">文件之间存在依赖关系，因此必须严格保证加载顺序（比如上例的</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">1.js</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">要在</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">2.js</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">的前面），依赖性最大的模块一定要放到最后加载，</span></font><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; color: rgb(255, 38, 0); -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;">当依赖关系很复杂的时候，代码的编写和维护都会变得困难。</span></font></div></div><div><br/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"><font size="3">req</font><font style="font-size: 14px;">uire.js</font></span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"><font style="font-size: 14px;">的诞生，就是为了解决这两个问题：</font></span></div></div><div><img src="day22_%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91.html.resources/2C64A601-B5A6-4F52-B6A4-CD3BDFF9BEEA.png" height="251" width="629"/><br/></div><div><br/></div><div><span style="font-size: 18px;"><span style="font-size: 18px; font-family: Helvetica; font-weight: bold;">7.2require.js的加载</span></span></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">使用</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">require.js</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">的第一步，是先去官方网站下载最新版本。下载后，假定把它放在</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">js</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">子目录下面，就可以加载了。</span></font></div></div><div><img src="day22_%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91.html.resources/1DE6DAB3-0CF2-4490-9409-2AC56C1BA55E.png" height="26" width="819"/><br/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">有人可能会想到，加载这个文件，也可能造成网页失去响应。解决办法有两个，一个是把它放在网页底部加载，另一个是写成下面这样：</span></font></div></div><div><img src="day22_%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91.html.resources/A4ED66E3-AA98-414F-B6C1-39A0673C09B1.png" height="27" width="953"/><br/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000"><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"><font style="font-size: 14px;">asy</font></span><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">nc</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">属性表明这个文件需要异步加载，避免网页失去响应。</span></font></font><font color="#07A80B" style="font-size: 14px;"><span style="font-weight: bold; font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">IE</span><span style="font-weight: bold; font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">不支持这个属性，只支持</span><span style="font-weight: bold; font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">defer</span><span style="font-weight: bold; font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">，所以把</span><span style="font-weight: bold; font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">defer</span><span style="font-weight: bold; font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">也写上。</span></font></div></div><div><br/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"><font style="font-size: 14px;">加载</font></span><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"><font color="#FF2600">require.js</font></span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">以后，下一步就要加载我们自己的代码了。假定我们自己的代码文件是</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"><font color="#FF2600">main.js</font></span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">，也放在</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">js</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">目录下面。那么，只需要写成下面这样就行了：</span></font></div></div><div><img src="day22_%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91.html.resources/604ED94E-5983-47BE-A9B9-43A86C564C79.png" height="22" width="923"/><br/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"><font color="#FF2600"><font size="3">data-</font><font style="font-size: 14px;">main</font></font></span><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">属性的作用是，指定网页程序的主模块。在上例中，就是</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">js</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">目录下面的</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">main.js</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">，这个文件会第一个被</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">require.js</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">加载。由于</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">require.js</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">默认的文件后缀名是</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">js</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">，所以可以把</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">main.js</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">简写成</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">main</span><span style="font-style: normal; font-variant-caps: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">。</span></font></div></div><div><br/></div><div><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;">7.3、主模块的写法</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">上一节的</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">main.js</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">，我把它称为</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">"</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">主模块</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">"</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">，意思是整个网页的入口代码。它有点像</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">C</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">语言的</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">main()</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">函数，所有代码都从这儿开始运行。</span></font></div><div><font style="font-size: 14px;"><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">下面就来看，怎么写</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 38, 0); font-family: Monaco;"><font color="#FF2600">main.js</font></span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">。</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">如果我们的代码不依赖任何其他模块，那么可以直接写入</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">javascript</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">代码。</span></font></div></div><div><img src="day22_%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91.html.resources/72FB99A5-6A4D-4424-8FC2-4ACB1B41AAAF.png" height="49" width="766"/><br/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">但这样的话，就没必要使用</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">require.js</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">了。真正常见的情况是，主模块依赖于其他模块，这时就要使用</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">AMD</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">规范定义的的</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">require()</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">函数。</span></font></div></div><div><br/></div><div><img src="day22_%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91.html.resources/F4536CC9-1FB0-4307-A4D4-15CB757B9BB9.png" height="108" width="823"/><br/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">require()</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">函数接受两个参数。第一个参数是一个数组，表示所依赖的模块，上例就是</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">['moduleA', 'moduleB', 'moduleC']</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">，即主模块依赖这三个模块；第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">require()</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">异步加载</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">moduleA</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">，</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">moduleB</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">和</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">moduleC</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">，浏览器不会失去响应；它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。</span></font></div></div><div><br/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">下面，我们看一个实际的例子。</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">假定主模块依赖</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">jquery</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">、</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">underscore</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">和</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">backbone</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">这三个模块，</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">main.js</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">就可以这样写：</span></font></div></div><div><img src="day22_%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91.html.resources/81F56807-7EF7-4A88-A1C7-065C1EED6320.png" height="89" width="861"/><br/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">require.js</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">会先加载</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">jQuery</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">、</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">underscore</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">和</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">backbone</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">，然后再运行回调函数。主模块的代码就写在回调函数中。</span></font></div></div><div><br/></div><div><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;">7.4、模块化加载</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"><font color="#000000"><span style="font-size: 14px;">    </span><font size="3">上一节</font><font style="font-size: 14px;">最后的示例中，主模块的依赖模块是</font></font></span><font style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;"><font color="#0B930D">['jquery', 'underscore', 'backbone']</font></span><font color="#000000"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">。默认情况下，</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">require.js</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">假定这三个模块与</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">main.js</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">在同一个目录，文件名分别为</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">jquery.js</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">，</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">underscore.js</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">和</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">backbone.js</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">，然后自动加载。</span></font></font></div><div><font style="font-size: 14px;"><font color="#000000"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">使用</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">require.config()</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">方法，我们可以对模块的加载行为进行自定义。</span></font><font color="#0E750D"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">require.config()</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">就写在主模块（</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">main.js</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">）的头部。参数就是一个对象，这个对象的</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">paths</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 249, 0); font-family: Monaco;">属性指定各个模块的加载路径</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(0, 250, 146); font-family: Monaco;">。</span></font></font></div></div><div><img src="day22_%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91.html.resources/185B142D-6887-447E-8C32-2D79CE10D795.png" height="141" width="839"/><br/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">上面的代码给出了三个模块的文件名，路径默认与</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">main.js</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">在同一个目录（</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">js</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">子目录）。如果这些模块在其他目录，比如</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">js/lib</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">目录，则有两种写法。一种是逐一指定路径。</span></font></div></div><div><img src="day22_%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91.html.resources/DF079937-2780-4F87-B447-725BF7FF6FFA.png" height="306" width="628"/><br/></div><div><img src="day22_%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91.html.resources/92CDF916-BD5F-48DB-B6B5-B3CA93E743EB.png" height="133" width="737"/><br/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">require.js</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">要求，每个模块是一个单独的</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">js</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">文件。这样的话，如果加载多个模块，就会发出多次</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">HTTP</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">请求，会影响网页的加载速度。因此，</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">require.js</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">提供了一个优化工具，当模块部署完毕以后，可以用这个工具将多个模块合并在一个文件中，减少</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">HTTP</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">请求数。</span></font></div></div><div><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;"> 八、AMD模块的写法</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">require.js</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">加载的模块，采用</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">AMD</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">规范。也就是说，模块必须按照</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">AMD</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">的规定来写。</span></font></div><div><font color="#000000" style="font-size: 14px;"><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">具体来说，就是模块必须采用特定的</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">define()</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">函数来定义。如果一个模块不依赖其他模块，那么可以直接定义在</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">define()</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">函数之中。</span></font></div><div><font style="font-size: 14px;"><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">假定现在有一个</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"><font color="#FF2600">add.js</font></span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">文件，它定义了一个</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">add</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">模块。那么，</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">add.js</span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">就要这样写：</span></font></div></div><div><img src="day22_%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91.html.resources/502000BF-BC64-4843-8557-690C1A04A354.png" height="149" width="792"/><br/></div><div><img src="day22_%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91.html.resources/1C847896-4470-4314-ACD7-E103E3B8D5AD.png" height="250" width="800"/><br/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);-en-codeblock:true;"><div><font style="font-size: 14px;"><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">如果这个模块还依赖其他模块，那么</span><span style="font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;"><font color="#FF2600">define()</font></span><span style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; line-height: normal; -webkit-font-kerning: none; font-variant-ligatures: no-common-ligatures; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: rgb(255, 255, 255); font-family: Monaco;">函数的第一个参数，必须是一个数组，指明该模块的依赖性。</span></font></div></div><div><img src="day22_%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91.html.resources/695B21FD-61CC-483F-8C20-D0FAF701AF10.png" height="319" width="753"/><br/></div><div><br/></div><div><br/></div><div><font style="font-size: 18px;"><span style="font-size: 18px; font-weight: bold;">九、总结和拓展</span></font></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div></div><div><br/></div></body></html>